<html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电商搜索系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FF4400', // 主色调：橙色（类似淘宝/天猫）
            secondary: '#0066CC', // 辅助色：蓝色
            neutral: {
              100: '#F5F5F5',
              200: '#E5E5E5',
              300: '#D4D4D4',
              400: '#A3A3A3',
              500: '#737373',
              600: '#525252',
              700: '#404040',
              800: '#262626',
              900: '#171717',
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 12px rgba(0, 0, 0, 0.05)',
            'hover': '0 8px 24px rgba(0, 0, 0, 0.12)',
          }
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .transition-transform-opacity {
        transition-property: transform, opacity;
      }
    }
  </style>
</head>

<body class="bg-neutral-100 font-sans text-neutral-800 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <a href="#" class="flex items-center space-x-2">
        <div class="text-primary text-3xl">
          <i class="fa fa-shopping-bag"></i>
        </div>
        <span class="font-bold text-xl text-primary">电商搜索</span>
      </a>

      <!-- 搜索框 -->
      <div class="relative flex-1 max-w-2xl mx-8">
        <div class="relative">
          <input type="text" id="search-input" placeholder="搜索商品、品牌或分类..." class="w-full py-3 px-4 pr-12 rounded-full border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
          <button id="search-button" class="absolute right-0 top-0 bottom-0 w-12 flex items-center justify-center text-primary hover:bg-primary/5 rounded-r-full transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
        </div>

        <!-- 搜索建议 (默认隐藏) -->
        <div id="search-suggestions" class="absolute top-full left-0 right-0 mt-1 bg-white rounded-lg shadow-lg border border-neutral-200 hidden z-50">
          <ul class="max-h-96 overflow-y-auto scrollbar-hide">
            <!-- 搜索建议会通过JS动态生成 -->
          </ul>
        </div>
      </div>

      <!-- 用户操作区 -->
      <div class="flex items-center space-x-4">
        <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa fa-user text-neutral-600"></i>
        </button>
        <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa fa-heart text-neutral-600"></i>
        </button>
        <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors relative">
          <i class="fa fa-shopping-cart text-neutral-600"></i>
          <span class="absolute -top-1 -right-1 bg-primary text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span>
        </button>
      </div>
    </div>

    <!-- 分类导航 -->
    <nav class="bg-white border-t border-neutral-200">
      <div class="container mx-auto px-4">
        <ul class="flex overflow-x-auto scrollbar-hide space-x-6 py-2">
          <li><a href="#" class="text-primary font-medium py-2 inline-block">全部商品</a></li>
          <li><a href="#" class="text-neutral-600 hover:text-primary py-2 inline-block transition-colors">电子产品</a></li>
          <li><a href="#" class="text-neutral-600 hover:text-primary py-2 inline-block transition-colors">服装鞋帽</a></li>
          <li><a href="#" class="text-neutral-600 hover:text-primary py-2 inline-block transition-colors">家居用品</a></li>
          <li><a href="#" class="text-neutral-600 hover:text-primary py-2 inline-block transition-colors">美妆个护</a></li>
          <li><a href="#" class="text-neutral-600 hover:text-primary py-2 inline-block transition-colors">运动户外</a></li>
          <li><a href="#" class="text-neutral-600 hover:text-primary py-2 inline-block transition-colors">母婴玩具</a></li>
          <li><a href="#" class="text-neutral-600 hover:text-primary py-2 inline-block transition-colors">食品保健</a></li>
          <li><a href="#" class="text-neutral-600 hover:text-primary py-2 inline-block transition-colors">图书音像</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6">
    <!-- 搜索结果统计 -->
    <div id="search-stats" class="mb-6 text-sm text-neutral-500 hidden">
      <span id="result-count">0</span> 个结果，搜索用时 <span id="search-time">0.0</span> 秒
    </div>

    <!-- 筛选条件 -->
    <div id="filter-container" class="bg-white rounded-xl shadow-card p-4 mb-6 hidden">
      <div class="flex flex-wrap gap-4">
        <!-- 分类筛选 -->
        <div class="w-full md:w-auto">
          <label class="block text-sm font-medium text-neutral-600 mb-1">分类</label>
          <select id="category-filter" class="w-full md:w-48 p-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
            <option value="">全部分类</option>
            <option value="电子产品">电子产品</option>
            <option value="服装鞋帽">服装鞋帽</option>
            <option value="家居用品">家居用品</option>
            <option value="美妆个护">美妆个护</option>
            <option value="运动户外">运动户外</option>
          </select>
        </div>

        <!-- 价格筛选 -->
        <div class="w-full md:w-auto">
          <label class="block text-sm font-medium text-neutral-600 mb-1">价格范围</label>
          <div class="flex items-center gap-2">
            <input type="number" id="price-min" placeholder="最低" class="w-24 p-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
            <span class="text-neutral-400">-</span>
            <input type="number" id="price-max" placeholder="最高" class="w-24 p-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
            <button id="price-filter-btn" class="bg-primary/10 hover:bg-primary/20 text-primary px-3 py-2 rounded-lg text-sm transition-colors">
              筛选
            </button>
          </div>
        </div>

        <!-- 品牌筛选 -->
        <div class="w-full md:w-auto">
          <label class="block text-sm font-medium text-neutral-600 mb-1">品牌</label>
          <select id="brand-filter" class="w-full md:w-48 p-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
            <option value="">全部品牌</option>
            <option value="华为">华为</option>
            <option value="小米">小米</option>
            <option value="苹果">苹果</option>
            <option value="索尼">索尼</option>
            <option value="阿迪达斯">阿迪达斯</option>
            <option value="耐克">耐克</option>
            <option value="欧莱雅">欧莱雅</option>
            <option value="雅诗兰黛">雅诗兰黛</option>
          </select>
        </div>

        <!-- 评分筛选 -->
        <div class="w-full md:w-auto">
          <label class="block text-sm font-medium text-neutral-600 mb-1">最低评分</label>
          <select id="rating-filter" class="w-full md:w-48 p-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
            <option value="">不限制</option>
            <option value="4.5">4.5分及以上</option>
            <option value="4.0">4.0分及以上</option>
            <option value="3.5">3.5分及以上</option>
            <option value="3.0">3.0分及以上</option>
          </select>
        </div>
      </div>

      <!-- 活跃筛选标签 -->
      <div id="active-filters" class="mt-4 pt-4 border-t border-neutral-100 hidden">
        <div class="flex flex-wrap gap-2">
          <span class="text-sm font-medium text-neutral-600">已筛选：</span>
          <!-- 活跃筛选标签会通过JS动态生成 -->
          <button id="clear-all-filters" class="text-sm text-primary hover:underline ml-2">
            清除全部
          </button>
        </div>
      </div>
    </div>

    <!-- 排序选项 -->
    <div id="sort-options" class="bg-white rounded-xl shadow-card p-3 mb-6 hidden">
      <div class="flex items-center justify-between">
        <div class="flex space-x-1">
          <button class="sort-btn active px-4 py-2 text-sm font-medium rounded-lg" data-sort="relevance">
            综合
          </button>
          <button class="sort-btn px-4 py-2 text-sm font-medium rounded-lg" data-sort="price_asc">
            价格 ↑
          </button>
          <button class="sort-btn px-4 py-2 text-sm font-medium rounded-lg" data-sort="price_desc">
            价格 ↓
          </button>
          <button class="sort-btn px-4 py-2 text-sm font-medium rounded-lg" data-sort="rating">
            评分
          </button>
          <button class="sort-btn px-4 py-2 text-sm font-medium rounded-lg" data-sort="sales">
            销量
          </button>
        </div>

        <div class="flex items-center space-x-3">
          <div class="flex items-center">
            <span class="text-sm text-neutral-500 mr-2">显示方式：</span>
            <button id="view-grid" class="p-1.5 rounded text-primary bg-primary/10">
              <i class="fa fa-th-large"></i>
            </button>
            <button id="view-list" class="p-1.5 rounded text-neutral-400 hover:text-primary hover:bg-primary/10 transition-colors">
              <i class="fa fa-list"></i>
            </button>
          </div>

          <div class="flex items-center">
            <span class="text-sm text-neutral-500 mr-2">每页显示：</span>
            <select id="items-per-page" class="text-sm border border-neutral-200 rounded p-1 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
              <option value="12">12个</option>
              <option value="24">24个</option>
              <option value="48">48个</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品列表 -->
    <div id="products-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
      <!-- 商品卡片会通过JS动态生成 -->
    </div>

    <!-- 加载更多 -->
    <div id="loading-more" class="flex justify-center py-8 hidden">
      <div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-primary"></div>
    </div>

    <!-- 分页 -->
    <div id="pagination" class="flex justify-center items-center space-x-2 py-6 hidden">
      <button id="prev-page" class="px-4 py-2 rounded-lg border border-neutral-200 text-neutral-600 hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled="">
        <i class="fa fa-chevron-left"></i>
      </button>

      <div id="page-numbers" class="flex space-x-1">
        <!-- 页码会通过JS动态生成 -->
      </div>

      <button id="next-page" class="px-4 py-2 rounded-lg border border-neutral-200 text-neutral-600 hover:bg-neutral-50">
        <i class="fa fa-chevron-right"></i>
      </button>
    </div>

    <!-- 无结果提示 -->
    <div id="no-results" class="py-16 text-center hidden">
      <div class="text-6xl text-neutral-300 mb-4">
        <i class="fa fa-search"></i>
      </div>
      <h2 class="text-xl font-medium text-neutral-700 mb-2">没有找到匹配的商品</h2>
      <p class="text-neutral-500 mb-6">请尝试调整搜索关键词或筛选条件</p>
      <div class="flex flex-wrap justify-center gap-4 max-w-md mx-auto">
        <button class="px-6 py-2 bg-white border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors">
          <i class="fa fa-refresh mr-2"></i>重新搜索
        </button>
        <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
          <i class="fa fa-lightbulb-o mr-2"></i>查看推荐
        </button>
      </div>
    </div>

    <!-- 搜索建议区 -->
    <div id="search-suggestions-container" class="py-8">
      <h2 class="text-xl font-medium text-neutral-800 mb-4">热门搜索</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
        <a href="#" class="bg-white p-4 rounded-xl shadow-card hover:shadow-hover transition-all text-center hover:-translate-y-1">
          <div class="w-16 h-16 mx-auto mb-2 bg-primary/10 rounded-full flex items-center justify-center">
            <i class="fa fa-mobile-phone text-2xl text-primary"></i>
          </div>
          <span class="text-neutral-700">智能手机</span>
        </a>
        <a href="#" class="bg-white p-4 rounded-xl shadow-card hover:shadow-hover transition-all text-center hover:-translate-y-1">
          <div class="w-16 h-16 mx-auto mb-2 bg-secondary/10 rounded-full flex items-center justify-center">
            <i class="fa fa-laptop text-2xl text-secondary"></i>
          </div>
          <span class="text-neutral-700">笔记本电脑</span>
        </a>
        <a href="#" class="bg-white p-4 rounded-xl shadow-card hover:shadow-hover transition-all text-center hover:-translate-y-1">
          <div class="w-16 h-16 mx-auto mb-2 bg-green-500/10 rounded-full flex items-center justify-center">
            <i class="fa fa-tshirt text-2xl text-green-500"></i>
          </div>
          <span class="text-neutral-700">夏季服装</span>
        </a>
        <a href="#" class="bg-white p-4 rounded-xl shadow-card hover:shadow-hover transition-all text-center hover:-translate-y-1">
          <div class="w-16 h-16 mx-auto mb-2 bg-purple-500/10 rounded-full flex items-center justify-center">
            <i class="fa fa-paint-brush text-2xl text-purple-500"></i>
          </div>
          <span class="text-neutral-700">美妆护肤</span>
        </a>
        <a href="#" class="bg-white p-4 rounded-xl shadow-card hover:shadow-hover transition-all text-center hover:-translate-y-1">
          <div class="w-16 h-16 mx-auto mb-2 bg-amber-500/10 rounded-full flex items-center justify-center">
            <i class="fa fa-home text-2xl text-amber-500"></i>
          </div>
          <span class="text-neutral-700">家居用品</span>
        </a>
        <a href="#" class="bg-white p-4 rounded-xl shadow-card hover:shadow-hover transition-all text-center hover:-translate-y-1">
          <div class="w-16 h-16 mx-auto mb-2 bg-rose-500/10 rounded-full flex items-center justify-center">
            <i class="fa fa-gift text-2xl text-rose-500"></i>
          </div>
          <span class="text-neutral-700">礼品推荐</span>
        </a>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-neutral-800 text-neutral-300 py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-lg font-medium text-white mb-4">关于我们</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-white transition-colors">公司简介</a></li>
            <li><a href="#" class="hover:text-white transition-colors">招贤纳士</a></li>
            <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
            <li><a href="#" class="hover:text-white transition-colors">隐私政策</a></li>
          </ul>
        </div>

        <div>
          <h3 class="text-lg font-medium text-white mb-4">购物指南</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-white transition-colors">新手上路</a></li>
            <li><a href="#" class="hover:text-white transition-colors">支付方式</a></li>
            <li><a href="#" class="hover:text-white transition-colors">配送说明</a></li>
            <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
          </ul>
        </div>

        <div>
          <h3 class="text-lg font-medium text-white mb-4">售后服务</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-white transition-colors">退换货政策</a></li>
            <li><a href="#" class="hover:text-white transition-colors">售后流程</a></li>
            <li><a href="#" class="hover:text-white transition-colors">投诉建议</a></li>
            <li><a href="#" class="hover:text-white transition-colors">维修网点</a></li>
          </ul>
        </div>

        <div>
          <h3 class="text-lg font-medium text-white mb-4">客户服务</h3>
          <ul class="space-y-2">
            <li class="flex items-center">
              <i class="fa fa-phone mr-2"></i>
              <span>400-123-4567</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope mr-2"></i>
              <span>service@example.com</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-clock-o mr-2"></i>
              <span>周一至周日 9:00-22:00</span>
            </li>
          </ul>

          <div class="mt-4 flex space-x-4">
            <a href="#" class="w-10 h-10 rounded-full bg-neutral-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-neutral-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-neutral-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-8 border-t border-neutral-700 text-center text-sm text-neutral-400">
        <p>© 2025 电商搜索系统 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 商品详情模态框 (默认隐藏) -->
  <div id="product-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto transform scale-95 transition-transform duration-300">
      <div class="p-6">
        <div class="flex justify-between items-start mb-4">
          <h2 id="modal-product-name" class="text-2xl font-bold text-neutral-800"></h2>
          <button id="close-modal" class="text-neutral-400 hover:text-neutral-600 transition-colors">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <div class="bg-neutral-100 rounded-lg overflow-hidden mb-4">
              <img id="modal-product-image" src="https://picsum.photos/800/800" alt="商品图片" class="w-full h-auto object-cover">
            </div>
            <div class="grid grid-cols-4 gap-2">
              <div class="bg-neutral-100 rounded-md overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary">
                <img src="https://picsum.photos/200/200?random=1" alt="商品图片缩略图" class="w-full h-auto object-cover">
              </div>
              <div class="bg-neutral-100 rounded-md overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary">
                <img src="https://picsum.photos/200/200?random=2" alt="商品图片缩略图" class="w-full h-auto object-cover">
              </div>
              <div class="bg-neutral-100 rounded-md overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary">
                <img src="https://picsum.photos/200/200?random=3" alt="商品图片缩略图" class="w-full h-auto object-cover">
              </div>
              <div class="bg-neutral-100 rounded-md overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary">
                <img src="https://picsum.photos/200/200?random=4" alt="商品图片缩略图" class="w-full h-auto object-cover">
              </div>
            </div>
          </div>

          <div>
            <div class="bg-neutral-50 rounded-lg p-4 mb-6">
              <div class="flex items-center mb-2">
                <div class="flex text-amber-400">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star-half-o"></i>
                </div>
                <span id="modal-product-rating" class="ml-2 text-neutral-700"></span>
                <span class="ml-2 text-neutral-400">|</span>
                <span id="modal-product-reviews" class="ml-2 text-neutral-700"></span>
                <span class="text-neutral-400">条评价</span>
              </div>

              <div class="flex items-center mb-4">
                <span class="text-neutral-500 mr-2">价格：</span>
                <span id="modal-product-price" class="text-2xl font-bold text-primary"></span>
              </div>

              <div class="flex items-center mb-2">
                <span class="text-neutral-500 mr-2">销量：</span>
                <span id="modal-product-sales" class="text-neutral-700"></span>
              </div>
            </div>

            <div class="mb-6">
              <h3 class="text-neutral-600 font-medium mb-2">商品描述</h3>
              <p id="modal-product-description" class="text-neutral-700"></p>
            </div>

            <div class="mb-6">
              <h3 class="text-neutral-600 font-medium mb-2">品牌</h3>
              <p id="modal-product-brand" class="text-neutral-700"></p>
            </div>

            <div class="mb-6">
              <h3 class="text-neutral-600 font-medium mb-2">分类</h3>
              <p id="modal-product-category" class="text-neutral-700"></p>
            </div>

            <div class="flex space-x-4">
              <button class="flex-1 py-3 px-6 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                <i class="fa fa-shopping-cart mr-2"></i>
                加入购物车
              </button>
              <button class="py-3 px-6 bg-white border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors">
                <i class="fa fa-heart"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 模拟电商数据
    const products = [
      {
        id: "P001",
        name: "智能手机 5G全网通 128GB",
        category: "电子产品",
        price: 2999.00,
        originalPrice: 3299.00,
        brand: "华为",
        rating: 4.7,
        reviews: 2345,
        salesVolume: 15678,
        description: "这款智能手机采用最新5G技术，搭载高性能处理器，拥有128GB存储空间和高清摄像头，支持快速充电，为您带来卓越的使用体验。",
        tags: ["手机", "5G", "智能手机", "华为"],
        image: "https://picsum.photos/800/800?random=1"
      },
      {
        id: "P002",
        name: "无线蓝牙耳机 主动降噪",
        category: "电子产品",
        price: 799.00,
        originalPrice: 999.00,
        brand: "索尼",
        rating: 4.8,
        reviews: 1234,
        salesVolume: 8923,
        description: "这款无线蓝牙耳机采用主动降噪技术，能够有效隔绝外界噪音，提供沉浸式音乐体验。同时支持触控操作和长续航，适合日常使用和旅行。",
        tags: ["耳机", "无线", "蓝牙", "索尼", "降噪"],
        image: "https://picsum.photos/800/800?random=2"
      },
      {
        id: "P003",
        name: "女士夏季连衣裙 碎花雪纺",
        category: "服装鞋帽",
        price: 199.00,
        originalPrice: 259.00,
        brand: "ZARA",
        rating: 4.5,
        reviews: 3456,
        salesVolume: 24567,
        description: "这款夏季连衣裙采用轻盈雪纺面料，舒适透气，碎花设计清新甜美，适合各种场合穿着。修身剪裁，展现女性优雅气质。",
        tags: ["女装", "连衣裙", "夏季", "雪纺", "碎花"],
        image: "https://picsum.photos/800/800?random=3"
      },
      {
        id: "P004",
        name: "保湿精华液 50ml",
        category: "美妆个护",
        price: 299.00,
        originalPrice: 359.00,
        brand: "欧莱雅",
        rating: 4.6,
        reviews: 1876,
        salesVolume: 12345,
        description: "这款保湿精华液富含多种天然植物精华和透明质酸，能够深层滋润肌肤，增强肌肤弹性，改善干燥缺水问题，让肌肤保持水润光滑。",
        tags: ["护肤", "精华液", "保湿", "欧莱雅"],
        image: "https://picsum.photos/800/800?random=4"
      },
      {
        id: "P005",
        name: "家用无线吸尘器 18000Pa",
        category: "家居用品",
        price: 1299.00,
        originalPrice: 1599.00,
        brand: "小米",
        rating: 4.7,
        reviews: 2134,
        salesVolume: 9876,
        description: "这款无线吸尘器拥有18000Pa强劲吸力，配备多种清洁刷头，可满足不同场景的清洁需求。大容量电池，续航持久，轻便设计，使用轻松。",
        tags: ["家居", "吸尘器", "无线", "小米"],
        image: "https://picsum.photos/800/800?random=5"
      },
      {
        id: "P006",
        name: "运动跑步鞋 减震防滑",
        category: "服装鞋帽",
        price: 499.00,
        originalPrice: 599.00,
        brand: "阿迪达斯",
        rating: 4.8,
        reviews: 2789,
        salesVolume: 17654,
        description: "这款运动跑步鞋采用专业减震设计，提供良好的缓冲保护，防滑鞋底确保运动安全。轻盈透气面料，让双脚保持干爽舒适，适合各种跑步训练。",
        tags: ["运动鞋", "跑步", "阿迪达斯", "运动"],
        image: "https://picsum.photos/800/800?random=6"
      },
      {
        id: "P007",
        name: "防水睫毛膏 持久卷翘",
        category: "美妆个护",
        price: 89.00,
        originalPrice: 129.00,
        brand: "雅诗兰黛",
        rating: 4.6,
        reviews: 1567,
        salesVolume: 8765,
        description: "这款防水睫毛膏配方轻盈，不易结块，能够轻松打造浓密卷翘的睫毛效果。特殊防水配方，持久不晕染，适合各种场合使用。",
        tags: ["彩妆", "睫毛膏", "防水", "雅诗兰黛"],
        image: "https://picsum.photos/800/800?random=7"
      },
      {
        id: "P008",
        name: "智能手表 心率监测 睡眠分析",
        category: "电子产品",
        price: 899.00,
        originalPrice: 1099.00,
        brand: "苹果",
        rating: 4.9,
        reviews: 3245,
        salesVolume: 23456,
        description: "这款智能手表具备心率监测、睡眠分析、运动追踪等多种功能，支持接听电话和消息提醒。时尚设计，轻便舒适，是您健康生活的好帮手。",
        tags: ["智能手表", "苹果", "健康监测", "电子产品"],
        image: "https://picsum.photos/800/800?random=8"
      }
    ];

    // 搜索建议关键词
    const searchSuggestions = [
      "智能手机", "无线耳机", "笔记本电脑", "平板电脑", "智能手表",
      "连衣裙", "T恤", "牛仔裤", "运动鞋", "休闲鞋",
      "精华液", "面膜", "口红", "粉底液", "防晒霜",
      "吸尘器", "空气净化器", "电饭煲", "咖啡机", "电烤箱"
    ];

    // 当前搜索状态
    let currentSearch = {
      query: "",
      category: "",
      minPrice: null,
      maxPrice: null,
      brand: "",
      rating: null,
      sortBy: "relevance",
      page: 1,
      itemsPerPage: 12
    };

    // DOM 元素
    const searchInput = document.getElementById("search-input");
    const searchButton = document.getElementById("search-button");
    const searchSuggestionsContainer = document.getElementById("search-suggestions");
    const productsContainer = document.getElementById("products-container");
    const searchStats = document.getElementById("search-stats");
    const resultCount = document.getElementById("result-count");
    const searchTime = document.getElementById("search-time");
    const filterContainer = document.getElementById("filter-container");
    const activeFilters = document.getElementById("active-filters");
    const sortOptions = document.getElementById("sort-options");
    const pagination = document.getElementById("pagination");
    const pageNumbers = document.getElementById("page-numbers");
    const prevPageButton = document.getElementById("prev-page");
    const nextPageButton = document.getElementById("next-page");
    const noResults = document.getElementById("no-results");
    const searchSuggestionsSection = document.getElementById("search-suggestions-container");
    const productModal = document.getElementById("product-modal");
    const closeModalButton = document.getElementById("close-modal");
    const loadingMore = document.getElementById("loading-more");

    // 初始化页面
    document.addEventListener("DOMContentLoaded", () => {
      // 生成搜索建议
      generateSearchSuggestions();

      // 绑定事件监听
      searchInput.addEventListener("input", handleSearchInput);
      searchButton.addEventListener("click", handleSearch);
      searchInput.addEventListener("keydown", (e) => {
        if (e.key === "Enter") handleSearch();
      });

      // 筛选条件事件
      document.getElementById("category-filter").addEventListener("change", applyFilters);
      document.getElementById("brand-filter").addEventListener("change", applyFilters);
      document.getElementById("rating-filter").addEventListener("change", applyFilters);
      document.getElementById("price-filter-btn").addEventListener("click", applyFilters);
      document.getElementById("clear-all-filters").addEventListener("click", clearAllFilters);

      // 排序选项事件
      document.querySelectorAll(".sort-btn").forEach(btn => {
        btn.addEventListener("click", () => {
          document.querySelectorAll(".sort-btn").forEach(b => b.classList.remove("active", "bg-primary/10", "text-primary"));
          btn.classList.add("active", "bg-primary/10", "text-primary");
          currentSearch.sortBy = btn.dataset.sort;
          performSearch();
        });
      });

      // 视图切换事件
      document.getElementById("view-grid").addEventListener("click", () => {
        productsContainer.classList.remove("grid-cols-1");
        productsContainer.classList.add("grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "xl:grid-cols-4");
        document.getElementById("view-grid").classList.add("text-primary", "bg-primary/10");
        document.getElementById("view-list").classList.remove("text-primary", "bg-primary/10");
      });

      document.getElementById("view-list").addEventListener("click", () => {
        productsContainer.classList.remove("sm:grid-cols-2", "lg:grid-cols-3", "xl:grid-cols-4");
        productsContainer.classList.add("grid-cols-1");
        document.getElementById("view-list").classList.add("text-primary", "bg-primary/10");
        document.getElementById("view-grid").classList.remove("text-primary", "bg-primary/10");
      });

      // 每页显示数量事件
      document.getElementById("items-per-page").addEventListener("change", (e) => {
        currentSearch.itemsPerPage = parseInt(e.target.value);
        currentSearch.page = 1; // 重置为第一页
        performSearch();
      });

      // 分页事件
      prevPageButton.addEventListener("click", () => {
        if (currentSearch.page > 1) {
          currentSearch.page--;
          performSearch();
        }
      });

      nextPageButton.addEventListener("click", () => {
        const totalPages = Math.ceil(getFilteredProducts().length / currentSearch.itemsPerPage);
        if (currentSearch.page < totalPages) {
          currentSearch.page++;
          performSearch();
        }
      });

      // 模态框事件
      closeModalButton.addEventListener("click", closeProductModal);
      productModal.addEventListener("click", (e) => {
        if (e.target === productModal) closeProductModal();
      });

      // 滚动加载
      window.addEventListener("scroll", () => {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 300) {
          loadMoreProducts();
        }
      });
    });

    // 处理搜索输入
    function handleSearchInput() {
      const query = searchInput.value.trim().toLowerCase();

      if (query.length >= 2) {
        // 显示搜索建议
        const suggestions = searchSuggestions.filter(suggestion =>
          suggestion.toLowerCase().includes(query)
        );

        renderSearchSuggestions(suggestions);
        searchSuggestionsContainer.classList.remove("hidden");
      } else {
        searchSuggestionsContainer.classList.add("hidden");
      }
    }

    // 生成搜索建议
    function generateSearchSuggestions() {
      // 这里可以从后端获取真实数据
      // 简化示例，使用预设的搜索建议数组
    }

    // 渲染搜索建议
    function renderSearchSuggestions(suggestions) {
      const container = searchSuggestionsContainer.querySelector("ul");
      container.innerHTML = "";

      suggestions.forEach(suggestion => {
        const li = document.createElement("li");
        li.className = "px-4 py-2 hover:bg-neutral-50 cursor-pointer transition-colors";
        li.textContent = suggestion;

        li.addEventListener("click", () => {
          searchInput.value = suggestion;
          searchSuggestionsContainer.classList.add("hidden");
          handleSearch();
        });

        container.appendChild(li);
      });
    }

    // 处理搜索
    function handleSearch() {
      const query = searchInput.value.trim();
      if (query) {
        currentSearch.query = query;
        currentSearch.page = 1; // 重置为第一页
        performSearch();
      }
    }

    // 执行搜索
    function performSearch() {
      // 显示加载状态
      productsContainer.innerHTML = "";
      searchStats.classList.add("hidden");
      filterContainer.classList.add("hidden");
      activeFilters.classList.add("hidden");
      sortOptions.classList.add("hidden");
      pagination.classList.add("hidden");
      noResults.classList.add("hidden");
      searchSuggestionsSection.classList.add("hidden");
      loadingMore.classList.remove("hidden");

      // 模拟搜索延迟
      setTimeout(() => {
        const filteredProducts = getFilteredProducts();

        // 更新搜索统计
        resultCount.textContent = filteredProducts.length;
        searchTime.textContent = (Math.random() * 0.5 + 0.1).toFixed(2);
        searchStats.classList.remove("hidden");

        // 显示筛选器和排序选项
        if (currentSearch.query) {
          filterContainer.classList.remove("hidden");
          sortOptions.classList.remove("hidden");

          // 更新活跃筛选标签
          updateActiveFilters();
        }

        // 渲染商品
        if (filteredProducts.length > 0) {
          renderProducts(filteredProducts);

          // 更新分页
          updatePagination(filteredProducts);
          pagination.classList.remove("hidden");
        } else {
          noResults.classList.remove("hidden");
        }

        // 隐藏加载状态
        loadingMore.classList.add("hidden");
      }, 500);
    }

    // 加载更多商品（滚动加载）
    function loadMoreProducts() {
      if (loadingMore.classList.contains("hidden")) {
        const filteredProducts = getFilteredProducts();
        const totalPages = Math.ceil(filteredProducts.length / currentSearch.itemsPerPage);

        if (currentSearch.page < totalPages) {
          currentSearch.page++;
          performSearch();
        }
      }
    }

    // 获取过滤后的商品
    function getFilteredProducts() {
      let filtered = [...products];

      // 关键词过滤
      if (currentSearch.query) {
        const query = currentSearch.query.toLowerCase();
        filtered = filtered.filter(product =>
          product.name.toLowerCase().includes(query) ||
          product.description.toLowerCase().includes(query) ||
          product.category.toLowerCase().includes(query) ||
          product.brand.toLowerCase().includes(query) ||
          product.tags.some(tag => tag.toLowerCase().includes(query))
        );
      }

      // 分类过滤
      if (currentSearch.category) {
        filtered = filtered.filter(product =>
          product.category === currentSearch.category
        );
      }

      // 价格过滤
      if (currentSearch.minPrice !== null) {
        filtered = filtered.filter(product =>
          product.price >= currentSearch.minPrice
        );
      }

      if (currentSearch.maxPrice !== null) {
        filtered = filtered.filter(product =>
          product.price <= currentSearch.maxPrice
        );
      }

      // 品牌过滤
      if (currentSearch.brand) {
        filtered = filtered.filter(product =>
          product.brand === currentSearch.brand
        );
      }

      // 评分过滤
      if (currentSearch.rating !== null) {
        filtered = filtered.filter(product =>
          product.rating >= parseFloat(currentSearch.rating)
        );
      }

      // 排序
      switch (currentSearch.sortBy) {
        case "price_asc":
          filtered.sort((a, b) => a.price - b.price);
          break;
        case "price_desc":
          filtered.sort((a, b) => b.price - a.price);
          break;
        case "rating":
          filtered.sort((a, b) => b.rating - a.rating);
          break;
        case "sales":
          filtered.sort((a, b) => b.salesVolume - a.salesVolume);
          break;
        case "relevance":
        default:
          // 按相关性排序（匹配关键词多的优先）
          filtered.sort((a, b) => {
            const query = currentSearch.query.toLowerCase();
            const aMatchCount = (
              (a.name.toLowerCase().includes(query) ? 1 : 0) +
              (a.description.toLowerCase().includes(query) ? 1 : 0) +
              (a.category.toLowerCase().includes(query) ? 1 : 0) +
              (a.brand.toLowerCase().includes(query) ? 1 : 0) +
              (a.tags.some(tag => tag.toLowerCase().includes(query)) ? 1 : 0)
            );

            const bMatchCount = (
              (b.name.toLowerCase().includes(query) ? 1 : 0) +
              (b.description.toLowerCase().includes(query) ? 1 : 0) +
              (b.category.toLowerCase().includes(query) ? 1 : 0) +
              (b.brand.toLowerCase().includes(query) ? 1 : 0) +
              (b.tags.some(tag => tag.toLowerCase().includes(query)) ? 1 : 0)
            );

            return bMatchCount - aMatchCount;
          });
          break;
      }

      return filtered;
    }

    // 渲染商品
    function renderProducts(products) {
      productsContainer.innerHTML = "";

      // 计算当前页的商品范围
      const startIndex = (currentSearch.page - 1) * currentSearch.itemsPerPage;
      const endIndex = Math.min(startIndex + currentSearch.itemsPerPage, products.length);
      const currentPageProducts = products.slice(startIndex, endIndex);

      currentPageProducts.forEach(product => {
        const discount = product.originalPrice ? Math.round((1 - product.price / product.originalPrice) * 100) : 0;

        const productCard = document.createElement("div");
        productCard.className = "bg-white rounded-xl shadow-card hover:shadow-hover transition-all duration-300 overflow-hidden group";
        productCard.innerHTML = `
          <div class="relative">
            <img src="${product.image}" alt="${product.name}" class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-105">
            ${discount > 0 ? `<div class="absolute top-2 left-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">${discount}% OFF</div>` : ''}
            <button class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-neutral-500 hover:text-primary transition-colors">
              <i class="fa fa-heart-o"></i>
            </button>
          </div>
          <div class="p-4">
            <h3 class="font-medium text-neutral-800 mb-2 line-clamp-2 h-12">${product.name}</h3>
            <div class="flex items-center mb-2">
              <div class="flex text-amber-400 text-xs">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
              </div>
              <span class="ml-1 text-sm text-neutral-600">${product.rating}</span>
              <span class="ml-2 text-xs text-neutral-400">(${product.reviews})</span>
            </div>
            <div class="mb-3">
              <span class="text-primary font-bold">¥${product.price.toFixed(2)}</span>
              ${product.originalPrice ? `<span class="ml-2 text-neutral-400 line-through text-sm">¥${product.originalPrice.toFixed(2)}</span>` : ''}
            </div>
            <div class="flex items-center justify-between">
              <span class="text-xs text-neutral-500">销量 ${product.salesVolume}</span>
              <button class="view-details-btn bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1.5 rounded-lg text-sm transition-colors" data-id="${product.id}">
                查看详情
              </button>
            </div>
          </div>
        `;

        productsContainer.appendChild(productCard);

        // 绑定查看详情事件
        productCard.querySelector(".view-details-btn").addEventListener("click", () => {
          openProductModal(product);
        });
      });
    }

    // 打开商品详情模态框
    function openProductModal(product) {
      document.getElementById("modal-product-name").textContent = product.name;
      document.getElementById("modal-product-image").src = product.image;
      document.getElementById("modal-product-image").alt = product.name;
      document.getElementById("modal-product-price").textContent = `¥${product.price.toFixed(2)}`;
      document.getElementById("modal-product-rating").textContent = product.rating;
      document.getElementById("modal-product-reviews").textContent = product.reviews;
      document.getElementById("modal-product-sales").textContent = `已售 ${product.salesVolume}`;
      document.getElementById("modal-product-description").textContent = product.description;
      document.getElementById("modal-product-brand").textContent = product.brand;
      document.getElementById("modal-product-category").textContent = product.category;

      // 显示模态框
      productModal.classList.remove("opacity-0", "pointer-events-none");
      productModal.querySelector("div").classList.remove("scale-95");
      productModal.querySelector("div").classList.add("scale-100");
      document.body.style.overflow = "hidden";
    }

    // 关闭商品详情模态框
    function closeProductModal() {
      productModal.classList.add("opacity-0", "pointer-events-none");
      productModal.querySelector("div").classList.remove("scale-100");
      productModal.querySelector("div").classList.add("scale-95");
      document.body.style.overflow = "";
    }

    // 更新分页
    function updatePagination(products) {
      const totalPages = Math.ceil(products.length / currentSearch.itemsPerPage);
      pageNumbers.innerHTML = "";

      // 最多显示7个页码
      let startPage = Math.max(1, currentSearch.page - 3);
      let endPage = Math.min(startPage + 6, totalPages);

      // 调整起始页码，确保总显示7个页码（如果可能）
      if (endPage - startPage < 6 && startPage > 1) {
        startPage = Math.max(1, endPage - 6);
      }

      // 首页按钮
      if (startPage > 1) {
        addPageButton(1);
        if (startPage > 2) {
          addEllipsis();
        }
      }

      // 中间页码
      for (let i = startPage; i <= endPage; i++) {
        addPageButton(i);
      }

      // 末页按钮
      if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
          addEllipsis();
        }
        addPageButton(totalPages);
      }

      // 禁用/启用上一页/下一页按钮
      prevPageButton.disabled = currentSearch.page === 1;
      nextPageButton.disabled = currentSearch.page === totalPages;
    }

    // 添加页码按钮
    function addPageButton(pageNum) {
      const button = document.createElement("button");
      button.className = `px-4 py-2 rounded-lg ${
        pageNum === currentSearch.page
          ? "bg-primary text-white"
          : "border border-neutral-200 text-neutral-600 hover:bg-neutral-50"
      }`;
      button.textContent = pageNum;

      button.addEventListener("click", () => {
        currentSearch.page = pageNum;
        performSearch();
      });

      pageNumbers.appendChild(button);
    }

    // 添加省略号
    function addEllipsis() {
      const span = document.createElement("span");
      span.className = "px-2 py-2 text-neutral-400";
      span.textContent = "...";
      pageNumbers.appendChild(span);
    }

    // 应用筛选条件
    function applyFilters() {
      currentSearch.category = document.getElementById("category-filter").value;}
  </script></body></html>